<template>
  <div class="distribution-settings">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>分销设置</span>
        </div>
      </template>

      <el-form :model="settingsForm" label-width="120px">
        <el-form-item label="分销功能">
          <el-switch
            v-model="settingsForm.enabled"
            active-value="1"
            inactive-value="0"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item>

        <el-form-item label="分销模式">
          <el-radio-group v-model="settingsForm.mode">
            <el-radio label="everyone">人人分销</el-radio>
            <el-radio label="specified">指定分销</el-radio>
            <el-radio label="threshold">满额分销</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="满额金额" v-if="settingsForm.mode === 'threshold'">
          <el-input-number
            v-model="settingsForm.threshold_amount"
            :min="0"
            :precision="2"
            :step="100"
          />
          <span style="margin-left: 10px; color: #909399;">元</span>
        </el-form-item>

        <el-form-item label="分销层级">
          <el-radio-group v-model="settingsForm.levels">
            <el-radio :label="1">一级分销</el-radio>
            <el-radio :label="2">二级分销</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="一级佣金比例">
          <el-input-number
            v-model="settingsForm.level1_commission"
            :min="0"
            :max="100"
            :precision="2"
          />
          <span style="margin-left: 10px; color: #909399;">%</span>
        </el-form-item>

        <el-form-item label="二级佣金比例" v-if="settingsForm.levels === 2">
          <el-input-number
            v-model="settingsForm.level2_commission"
            :min="0"
            :max="100"
            :precision="2"
          />
          <span style="margin-left: 10px; color: #909399;">%</span>
        </el-form-item>

        <el-form-item label="分销内购">
          <el-switch
            v-model="settingsForm.self_purchase"
            active-value="1"
            inactive-value="0"
            active-text="开启"
            inactive-text="关闭"
          />
          <div style="margin-top: 5px; color: #909399; font-size: 12px;">
            开启后分销员自己购买商品可获得佣金
          </div>
        </el-form-item>

        <el-form-item label="提现手续费">
          <el-input-number
            v-model="settingsForm.withdrawal_fee"
            :min="0"
            :max="100"
            :precision="2"
          />
          <span style="margin-left: 10px; color: #909399;">%</span>
        </el-form-item>

        <el-form-item label="最低提现金额">
          <el-input-number
            v-model="settingsForm.min_withdrawal"
            :min="0"
            :precision="2"
          />
          <span style="margin-left: 10px; color: #909399;">元</span>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="saveSettings" :loading="saving">保存设置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const VITE_URL = (window as any).VITE_URL

// 表单数据
const settingsForm = ref({
  enabled: true,
  mode: 'everyone',
  threshold_amount: 0,
  levels: 2,
  level1_commission: 10,
  level2_commission: 5,
  self_purchase: true,
  withdrawal_fee: 0,
  min_withdrawal: 100
})

const saving = ref(false)

// 获取分销设置
const getSettings = async () => {
  try {
    const url = `${VITE_URL}/admin.distribution/settings`
    const res = await axios.get(url)
    if (res.data.status === 0 && res.data.settings) {
      // 将返回的设置合并到表单中
      Object.assign(settingsForm.value, res.data.settings)
    }
  } catch (error) {
    ElMessage.error('获取分销设置失败')
  }
}

// 保存分销设置
const saveSettings = async () => {
  try {
    saving.value = true
    const url = `${VITE_URL}/admin.distribution/settings`
    const res = await axios.post(url, settingsForm.value)
    if (res.data.status === 0) {
      ElMessage.success('保存成功')
    } else {
      ElMessage.error(res.data.message || '保存失败')
    }
  } catch (error) {
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

onMounted(() => {
  getSettings()
})
</script>

<style scoped>
.distribution-settings {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>